<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="viewport"
		content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="format-detection" content="email=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/mui.min.css">
	<script src='js/vue.js'></script>
	<script src="js/axios.js"></script><!-- 对接口要引入的东西 -->
	<link rel="stylesheet" href="css/collection.css" />
	<title>我的收藏</title>
</head>

<body>
	<div id='app'>
		<!-- 头部设置 -->
		<header class="mui-bar mui-bar-nav bg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title collect_font">我的收藏</h1>
		</header>
		<main>
			<div class="fenbu main">
				<div class='tupian' v-for="site in sites" @click="url(site.id)">
					<img :src='site.image1' class='tp_font'>
					<img :src='site.image2' class='tp_font'>
					<span class='font'>{{site.title}}</span>
				</div>
			</div>
	</main>
	</div>
	<footer>
	</footer>
	<script src="js/mui.min.js"></script>
	<script>
		const API_PROXY = 'https://bird.ioliu.cn/v1/?url='
		new Vue({
			el: '#app',
			data: {
				sites:''
			},
			created() { 
				this.getlist();
			},//生命周期
			methods: {
				getlist() {
					axios.post(API_PROXY + 'mingpian.32one.top/Index/Member/myCollection')//接口
						.then(res => {
							console.log(res)
							this.sites=res.data.data;
						}, err => {
							console.log(err);
						})
				},
				url(id){
					location.href="xiangqing.html?id="+id;
				}
			}
		})
	</script>
</body>

</html>